<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    列表渲染 v-for 指令

      语法

        v-for="item in list"
          list 可以是一个数组、对象、数字
            list - 数组
              item 数组中的元素
            list - 对象
              item 是对象的value值
            list - 数字
              内部会将该数字转换成数组。比如
              3 => [1, 2, 3]

        v-for="(item, index) in list"
          list 可以是一个数组、数字

          item  - 数组中的元素
          index - 元素下标
          
        v-for="(item, key, index) in list"
          list 是一个对象

          item - key-value键值对中的 value
          key  - key-value键值对中的 key
          index - key-value键值对中的 下标


   -->

    <div id="app">
      <h2>Person</h2>
      <ul>
        <li v-for="item in person">{{ item }}</li>
      </ul>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            person: {
              name: "张三",
              age: 18,
              gender: "男",
            },
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
